<template>
    <div class="personalHome">
        <Personal-Header bgColor="#5741d9"></Personal-Header>
        <Personal-Side></Personal-Side>
        <div class="content">
            <h2 class="pagetitle">{{$t('l.personal_197')}}</h2>
            <div class="personCon" @click="isShow=false">
                <div class="leftpanel">
                    <h2 class="persontitle">{{$t('l.personal_197')}}</h2>
                    <div class="rechargebar">
                        <div class="coinbar">
                            <div class="rechargecoin" @click.stop="showlist">
                                <img :src="currentCoin.icon" class="coinlogo">
                                <span>{{currentCoin.code}}</span>
                                <i></i>
                            </div>
                            <drop-down @inputValue="getInputValue" :placeholder="placeholder" @item-click="itemClick" :itemlist="coinlist" :nodatatext="nodatatext" :isShow="isShow" style="width:349px;top:78px;"></drop-down>
                        </div>
                        <div class="balancecoin">
                            <p>{{$t('l.personal_198')}}<span>{{coinIntro.totalprice}} {{currentCoin.code}}</span></p>
                            <p>{{$t('l.personal_199')}}<span>{{coinIntro.frozenAmount}} {{currentCoin.code}}</span></p>
                            <p>{{$t('l.personal_200')}}<span>{{coinIntro.availableAmount}} {{currentCoin.code}}</span></p>
                        </div>
                        <div class="rechargeaddress">
                            <p class="addrtitle">{{currentCoin.code}}{{$t('l.personal_201')}}
                                <span class="fr" v-show="currentCoin.code=='USDT'">
                                        <div class="checktab fl">
                                            <a :class="type==18?'active':''" @click="itemClickUSDT(18)">ERC20</a>
                                            <a :class="type==4?'active':''" @click="itemClickUSDT(4)">OMNI</a>
                                        </div>
                                </span>
                                </p>
                            <input class="addrput disabled" disabled v-model="depositAddress">
                            <div class="chargebtn clearfix">
                                <a class="btn">
                                    <i class="code"></i>{{$t('l.personal_202')}}
                                    <div class="dropqrcode">
                                        <p class="qrtitle">{{currentCoin.code}}{{$t('l.personal_201')}}</p>
                                        <div class="qrcodebar">
                                            <div class="qrcode" id="qrcode">
                                            </div>
                                        </div>
                                    </div>
                                </a>
                                <a class="btn" v-clipboard:copy="depositAddress" v-clipboard:success="onCopy" v-clipboard:error="onError"><i class="copy"></i>{{$t('l.add_23')}}</a>
                            </div>
                            <div v-show="tagDescribe" style="padding-top:40px" class="remarkbox">
                                <p class="addrtitle">{{currentCoin.code}}{{$t('l.personal_203')}}</p>
                                <input class="addrput disabled" disabled v-model="tagAddress">
                                <div class="chargebtn clearfix">
                                    <a class="btn">
                                        <i class="code"></i>{{$t('l.personal_202')}}
                                        <div class="dropqrcode">
                                            <p class="qrtitle">{{currentCoin.code}}{{$t('l.personal_203')}}</p>
                                            <div class="qrcodebar">
                                                <div class="qrcode" id="qrcode1">
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                    <a class="btn" v-clipboard:copy="tagAddress" v-clipboard:success="onCopy" v-clipboard:error="onError"><i class="copy"></i>{{$t('l.add_23')}}</a>
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </div>
                <div class="rightpanel">
                    <div class="tipbox" v-if="currentCoin.code!=='EOS'">
                        <p class="tiptitle">{{$t('l.personal_64')}}</p>
                        <p class="tiptext">{{coinIntro.tips}}</p>
                        <!-- <p class="tiptext">1. 使用{{currentCoin.code}}地址充值需要2个网络确认才能到账。</p>
                        <p class="tiptext">2. 充值完成后，你可以进入历史记录页面跟踪进度</p>
                        <p class="tiptext">3. 最小充值金额：{{coinIntro.depositLimit}} {{currentCoin.code}},小于最小金额的充值将不会上账且无法退回。</p>
                        <p class="tiptext">4. 禁止向{{currentCoin.code}}地址充值除{{currentCoin.code}}之外的资产，任何充入{{currentCoin.code}}地址的非{{currentCoin.code}}资产将不可找回。</p> -->
                    </div>
                    <!-- <div class="tipbox" v-else>
                        <p class="tiptitle">温馨提示</p>
                        <p class="tiptext">1. 使用EOS地址充值需要2个网络确认才能到账。</p>
                        <p class="tiptext">2. 充值完成后，你可以进入 历史记录页面跟踪进度</p>
                        <p class="tiptext">3. 最小充值金额：{{coinIntro.depositLimit}}EOS,小于最小金额的充值将不会上账且无法退回。</p>
                        <p class="tiptext">4. 通过MEMO方式充值 EOS 时，需填写我们提供的数字形式的MEMO标签，非法MEMO充值会导致交易失败，请您谅解</p>
                        <p class="tiptext">5. 请务必填写并仔细核对地址标签，这是您账户的唯一标识，否则资产将不可找回。</p>
                        <p class="tiptext">6. 禁止向BTC地址充值除BTC之外的资产，任何充入BTC地址的非BTC资产将不可找回。</p>
                    </div>     -->
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PersonalHeader from "@/components/personalHeader";
import PersonalSide from "@/components/personalSide";
import {api} from '@/api/api';
import dropDown from "@/components/dropdown";
import QRCode from 'qrcodejs2'

import {compute} from '@/assets/js/compute';

export default {
    components: {
        PersonalHeader,
        PersonalSide,
        dropDown
    },
    watch: {
        $route(){
            this.querycoin= this.$route.query.coin
        },
        querycoin(newValue, oldValue) {
           //this.changecoin();
        }
    },
    data() {
        return {
            nodatatext: this.$t('l.add_37'),
            currentCoin: "",
            isShow:false,
            coinlist:[],
            datalist:[],
            type:0,
            coinIntro:"",
            depositAddress:'',
            onceToken:"",
            tagAddress:'',
            querycoin:"",
            tagDescribe:"",
            placeholder:this.$t('l.add_130')
        }
    },
    created(){
        this.getCoins();
    },
    methods:{
        // 复制成功
        onCopy(e){
            this.$layer.msg(this.$t('l.personal_48'));
        },
        // 复制失败
        onError(e){
            alert("失败");
        },
        qrcode() {
            let that = this;
            new QRCode('qrcode', {
                width: 124,  
                height: 124,
                text: that.depositAddress, // 二维码地址
                colorDark : "#000",
                colorLight : "#fff",
            })
        },
        qrcode2() {
            let that = this;
            new QRCode('qrcode1', {
                width: 124,  
                height: 124,
                text: that.tagAddress, // 二维码地址
                colorDark : "#000",
                colorLight : "#fff",
            })
        },
       
        itemClick(data) {
            //console.log("点击币种",data)
            this.currentCoin= data;
            this.depositAddress = "";
            this.tagAddress = "";
            this.findCoinAssets();
                     
            this.isShow = false;
            $("#qrcode1,#qrcode").html("");
            
            if(this.currentCoin.code=="USDT"){
                if(this.type==0){
                    this.itemClickUSDT(18);
                }else{
                    this.itemClickUSDT(2);
                }
            }else{
                this.createOnceToken();
                this.type=0;
                setTimeout(() =>{
                    this.getAddress();
                },1000);  
                //setTimeout(console.log("点击id",coinid),2000);  
            }
        },
        itemClickUSDT(coinid) {
            //console.log("点击id",coinid)
            this.createOnceToken();
            this.type=coinid;
            //this.currentCoin= data;
            this.depositAddress = "";
            this.tagAddress = "";
            //this.findCoinAssets(coinid);
            setTimeout(() =>{
                this.getAddressUSDT(coinid);
            },1000);            
            this.isShow = false;
            $("#qrcode1,#qrcode").html("");
        },
        getInputValue(searchvalue) {
            if(searchvalue==""){
                this.coinlist = this.datalist;
                return;
            }
            let coinlist = [];
            // 请求获取筛选列表
            this.datalist.forEach((item,index)=>{
                if(item.code.indexOf(searchvalue.toUpperCase()) != -1){
                    coinlist.push(item);
                }
            })
            this.coinlist = coinlist;
        },
        showlist(){
            this.isShow = true;
        },
        changecoin(){
            let that = this;
            let querycoin = "";
            if(that.$route.query.coin){
                that.querycoin = that.$route.query.coin;
                that.coinlist.forEach((item,index)=>{
                    if(item.code == that.querycoin){
                        that.itemClick(item);
                    }
                })
            }
            
        },
        //获取币种列表
        async getCoins(){
            let that = this;
            let res = await api.coinsList({isDeposit:true});
            if(res.data.code==0){
                that.coinlist = res.data.data;
                that.datalist = res.data.data;
                that.currentCoin = res.data.data[0];
                if(that.$route.query.coin){
                    that.changecoin();
                }else{
                    that.findCoinAssets(res.data.data[0].currencyId);
                    that.getAddress(res.data.data[0].code);
                }
            }
           
            //console.log("coinlist",that.coinlist);
        },
        //获取一次性token
        async createOnceToken() {
            let that = this;
            let res = await api.createOnceToken();
            console.log("onceToken_res",res);
            if (res.data.code == 0) {
                that.onceToken = res.data.data.resultToken;
            }
        },
        //获取币种信息
        async findCoinAssets(){
            let that = this;
            let res = await api.findByCurrencyId({currencyId:that.currentCoin.currencyId});
            
            if(res.data.code==0){
                that.coinIntro = res.data.data
                that.coinIntro.tips = "";
                if(that.coinIntro.depositTips.length>0){
                    that.coinIntro.tips = that.coinIntro.depositTips[0].content;
                }
                that.coinIntro.totalprice = compute.dcmAdd(that.coinIntro.frozenAmount,that.coinIntro.availableAmount)
                
            }else{
                that.$layer.msg(res.data.msg);
            }
        },
        //获取充币地址
        async getAddress(){
            //console.log("coinid",this.currentCoin.currencyId);
            let that = this;
            let res = await api.deposit({currencyId:that.currentCoin.currencyId,onceToken:that.onceToken});
            if(res.data.code==0){
                that.depositAddress = res.data.data.address;
                that.tagAddress = res.data.data.tag;
                that.tagDescribe = res.data.data.tagDescribe;
                $("#qrcode1,#qrcode").html("");
                that.qrcode();
                that.qrcode2();
            }else if(res.data.code==1210008){
                that.$layer.msg(that.$t('l.add_96'));
            }else if(res.data.code==1210014){
                that.$layer.msg(that.$t('l.add_141'));
            }else{ 
                that.depositAddress = ""
                that.tagAddress = ""
                that.$layer.msg(res.data.msg);
            }
        },
        async getAddressUSDT(coinid){
            //console.log("coinid",coinid);
            let that = this;
            let res = await api.deposit({currencyId:coinid,onceToken:that.onceToken});
            if(res.data.code==0){
                that.depositAddress = res.data.data.address;
                that.tagAddress = res.data.data.tag;
                that.tagDescribe = res.data.data.tagDescribe;
                $("#qrcode1,#qrcode").html("");
                that.qrcode();
                that.qrcode2();
            }else if(res.data.code==1210008){
                that.$layer.msg(that.$t('l.add_96'));
            }else if(res.data.code==1210014){
                that.$layer.msg(that.$t('l.add_141'));
            }else{ 
                that.depositAddress = ""
                that.tagAddress = ""
                that.$layer.msg(res.data.msg);
            }
        },
    },
    mounted(){
        this.createOnceToken();
    }
}
</script>
<style lang="less">
.personalHome {
	padding-top: 100px;
}
.personCon{
    padding:24px 30px;
    box-sizing: border-box;
    height: 90%;
    .remarkbox{
        .dropqrcode{
            bottom:53px;
            top: initial !important;
            &:after{
                content:"";
                bottom:-6px;
                top: inherit !important;
                transform:none  !important;
            }
        }
    }
    
    .rechargebar{
        width:712px;
        margin:58px auto;
        .coinbar{
            float:left;
            width:346px;
            position:relative;
        }
        .rechargecoin{
            height:80px;
            border-radius:6px;
            border:1px solid rgba(221,224,235,1);
            padding:20px 25px;
            box-sizing: border-box;
            .coinlogo{
                float:left;
                width:40px;
                height:40px;
                margin-right:21px;
            }
            span{
                float:left;
                font-size:20px;
                font-familyA:"OpenSans-Semibold";
                font-weight:600;
                color:rgba(51,56,94,1);
                line-height:27px;
                padding-top:8px;
            }
            i{
                float:right;
                margin-right:10px;
                margin-top:16px;
                width:14px;
                height:8px;
                background:url(../../assets/images/arrow_btm.png) no-repeat center;
            }
        }
        .balancecoin{
            float:right;
            p{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:20px;
                padding-bottom:10px;
                span{
                    padding-left:30px;
                    font-familyA:"OpenSans";
                }
            }
        }
        .rechargeaddress{
            width:100%;
            background:rgba(247,248,252,1);
            border-radius:4px;
            border:1px solid rgba(233,238,244,1);
            box-sizing:border-box;
            padding:40px 47px 40px 30px;
            clear:both;
            position: relative;
            top: 40px;
            .addrtitle{
                font-size:16px;
                font-weight:500;
                color:rgba(51,56,94,1);
                line-height:22px;
                padding-bottom:8px;
            }
            .checktab{
                padding-right:24px;
                a{
                    width:82px;
                    height:32px;
                    border:1px solid rgba(221,224,235,1);
                    box-sizing: border-box;
                    text-align:center;
                    color:rgba(51,56,94,1);
                    line-height:32px;
                    float:left;
                    cursor: pointer;
                    &:first-child{
                        border-top-left-radius: 4px;
                        border-bottom-left-radius: 4px;
                    }
                    &:last-child{
                        border-top-right-radius: 4px;
                        border-bottom-right-radius: 4px;
                    }
                    &.active{
                        background:#2D8DFE;
                        background: linear-gradient(90deg, #3360FF 0%, #04A6FE 100%);
                        color:#fff;
                        border:none;
                    }
                }
            }
            .addrput{
                width:100%;
                height:40px;
                background:rgba(255,255,255,1);
                border-radius:4px;
                border:1px solid rgba(221,224,235,1);
                line-height:40px;
                text-indent:10px;
                font-size:14px;
                font-weight:500;
                color:rgba(51,56,94,1);
                line-height:24px;
            }
            .chargebtn{
                padding-top:23px;
                
                .dropqrcode{
                    display:none;
                    position:absolute;
                    width:164px;
                    height:164px;
                    background:rgba(255,255,255,1);
                    box-shadow:0px 2px 8px 0px rgba(0,0,0,0.15);
                    top:53px;
                    left:0;
                    z-index:9;
                    &:after{
                        content:"";
                        position:absolute;
                        top:-6px;
                        left:50%;
                        margin-left:-3px;
                        width:10px;
                        height:6px;
                        transform:rotateX(180deg);
                        background:url(../../assets/images/Triangle1@2x.png) no-repeat center;
                    }
                    .qrtitle{
                        font-size:14px;
                        color:rgba(51,56,94,1);
                        line-height:20px;
                        text-align:center;
                        padding-top:7px;
                    }
                    .qrcodebar{
                        padding:0 20px 0;
                        img{
                            width:124px;
                            height:124px;
                        }
                    }
                }
                .btn{
                    float:left;
                    width:164px;
                    height:40px;
                    line-height:40px;
                    margin-right:20px;
                    position:relative;
                    &:hover{
                        .dropqrcode{
                            display:block;
                        }
                    }
                    i{
                        display:inline-block;
                        vertical-align: middle;
                        width:16px;
                        height:16px;
                        margin-right:6px;
                        &.code{
                            background:url(../../assets/images/qrcodeico.png) no-repeat center;
                        }
                        &.copy{
                            background:url(../../assets/images/copyico.png) no-repeat center;
                        }
                    }
                }
            }
        }
    }
    .rightpanel{
        .tipbox{
            min-height:455px;
            background:rgba(240,242,253,1);
            border-radius:4px;
            border:1px solid #2D8DFE;
            padding:34px 20px;
            box-sizing: border-box;
            height: 100%;
            overflow-y: scroll;
            .tiptitle{
                line-height:24px;
                font-weight:500;
                color:rgba(51,56,94,1);
                font-size:16px;
                padding-left:34px;
                background:url(../../assets/images/tip.png) no-repeat left center;
                margin-bottom:26px;
            }
            .tiptext{
                font-size:14px;
                font-weight:400;
                color:rgba(51,56,94,1);
                line-height:24px;
            }
        }
    }
}
</style>



